<template>
  <el-dialog class="re-dialog" :close-on-click-modal="false" title="取件" :visible="dialogVisible" @close="close" width="550px">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
      <el-form-item label="取件人：" :label-width="formLabelWidth" prop="contacts">
        <el-input placeholder="请输入取件人" v-model="ruleForm.contacts" autocomplete="off" :maxlength='20'></el-input>
      </el-form-item>
      <el-form-item label="联系电话：" :label-width="formLabelWidth" prop="telNo">
        <el-input placeholder="请输入联系电话" v-model="ruleForm.telNo" autocomplete="off" :maxlength='11'></el-input>
      </el-form-item>
      <el-form-item label="快递单号：" :label-width="formLabelWidth" prop="expressNum">
        <el-input placeholder="请输入快递单号" v-model="ruleForm.expressNum" autocomplete="off" :maxlength='30'></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <button class="footer-btn cancel" @click="close">取 消</button>
      <button @click="submitForm('ruleForm')" class="footer-btn sure">确定</button>
    </span>
  </el-dialog>
</template>

<script>
import { getCard } from "../../config/api.js";
import { invalid } from "../../utils";
export default {
    name: "qjDialog",
    data() {
        let validatorPhone = (rule, value, callback) => {
            if (value && !invalid.mobileReg.test(value)) {
                callback(new Error("请输入正确的11位手机号码"));
            } else {
                callback();
            }
        };
        return {
            formLabelWidth: "90px",
            ruleForm: {
                contacts: "",
                telNo: "",
                expressNum: ""
            },
            rules: {
                expressNum: [
                    // {
                    //     required: true,
                    //     message: "请输入快递单号",
                    //     trigger: "blur"
                    // }
                ],
                contacts: [
                    { required: true, message: "请输入取件人", trigger: "blur" }
                ],
                telNo: [
                    {
                        required: true,
                        trigger: "blur",
                        validator: validatorPhone
                    },
                    {
                        required: true,
                        trigger: "blur",
                        message: "请输入取件人联系电话"
                    }
                ]
            }
        };
    },
    props: {
        record: Object, //数据
        dialogVisible: {
            type: Boolean,
            default: false
        }, //窗口显示/关闭
        onClose: Function //关闭弹窗的回调
    },
    methods: {
        close(e) {
            this.$emit("onClose");
        },
        submitForm(formName) {
            this.$refs[formName].validate((valid, values) => {
                if (valid) {
                    let {id,hanldeInfoName} = this.record;
                    getCard({ 
                        id, 
                        hanldeInfo:hanldeInfoName,
                        ...this[formName] }).then(
                        (res = {}) => {
                            this.$message({
                                message: "操作成功",
                                type: "success"
                            });
                            this.$emit("callBack"); //getList
                        }
                    );
                } else {
                    return false;
                }
            });
        }
    },
    watch: {
        dialogVisible: function(val, oldVal) {
            if (val) {
                const { contacts, telNo } = this.record || {};
                this.ruleForm = {
                    contacts: "",
                    telNo: ""
                };
            }
        }
    }
};
</script>

<style lang="scss">
.footer-btn {
    width: 66px;
    height: 32px;
    border-radius: 3px;
    &:active {
        opacity: 0.8;
    }
}

.sure {
    background-color: #1a36a9;
    color: #fff;
}
.cancel {
    background-color: #d2d2d2;
    margin-right: 40px;
}
</style>


<style>
.radio-li span {
    font-size: 12px !important;
    color: #606266;
}
.re-dialog .el-form-item {
    margin-bottom: 19px !important;
}
.re-dialog .el-dialog__body {
    padding-bottom: 0 !important;
}
.re-dialog .el-dialog__footer {
    border-top: 1px solid #eee;
    padding: 20px !important ;
}
.re-dialog .el-input__inner {
    height: 34px !important;
    line-height: 34px !important;
}
.el-form-item__content,
.el-form-item__label {
    line-height: 34px;
}
</style>


